<template>
    <div>
        <div>
            订单编号：{{order.id}}，商品名称:{{order.product.name}}，用户名称：{{order.user.username}}
        </div>
        <el-container style="height: 850px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)" class="link">
                <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item :index="0-1" @click="routeTo('/dashboard')">
                        <template slot="title">
                            <i class="el-icon-pie-chart"></i>
                            <span>数据大屏</span>
                        </template>
                    </el-menu-item>
                    <el-submenu :index="per.id + '-1'" v-for="per in permissions">
                        <template slot="title">
                            <i :class="per.icon"></i>
                            <span>{{per.name}}</span>
                        </template>
                        <el-menu-item :index="sper.id + '-1'" v-for="sper in per.subPermissions" @click="routeTo(sper.url)">{{sper.name}}</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>{{username}}</span>
                </el-header>

                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "MainView",
        data(){
            return{
                username:null,
                order:null,
                permissions:[] //权限集合
            }
        },
        methods:{
            loadOrder(){
                this.axios.get("/order/1")
                    .then(result => {
                        this.order = result.data.data;
                    });
            },
            // 查询当前用户的订单
            loadPermissionByUsername(){
                this.username = localStorage.getItem("username");
                this.axios.get("http://localhost:8080/user-permissions?username="+this.username)
                    .then(result => {
                        if(result.data.status == "OK"){
                            this.permissions = result.data.data;
                            console.log(this.permissions);

                        }
                    })
            },
            //路由跳转
            routeTo(path){
                this.$router.push({path:path});
            }
        },
        mounted() {
            //获得前面页面传递的值
            this.username = this.$route.query.username;
            if(this.username && this.username.length > 0){
                localStorage.setItem("username",this.username);
            }
            this.loadOrder();
            this.loadPermissionByUsername();
            this.routeTo('/dashboard');
        }
    }
</script>

<style scoped>
    .link{
        text-decoration: #42b983;
        font-size: 18px;
    }
</style>
